<template>
  <div id="all">
    <div id="cart">
      <!-- <header class="titleWrapper">
        <h4><strong>购物车</strong></h4>
        <button class="clearCart" >清空购物车</button>
      </header> -->
      <cart-list :cartsList="cartsList"></cart-list>
    </div>
    <div>
      <cart-foot></cart-foot>
    </div>
</div>
</template>


<script>
import CartFoot from './components/ShopcartFoot.vue';
import CartContent from './components/ShopcartContent.vue';
import CartList from './components/ShopcartsList.vue'
import axios from 'axios';
export default {
  name: 'Cart',
  components: {
    CartFoot,
    CartContent,
    CartList
  },
  data(){
      return{
        cartsId:[],
        cartsList: [], //最终总列表
      }
  },
  methods:{//获取json文件内容,
    getCartsData(){//获取购物车内包含的商品id
      const arr = [];
      for (let i = 0; i < localStorage.length; i++) {
        const key = localStorage.key(i);
        const value = localStorage.getItem(key);
        if (value === "购物车") {
          arr.push({ id: key });
        }
      }
      if(arr){
        this.cartsId=arr.map(item => item.id)//总列表
      }
    },
    getGoodsData() {//获取商品信息
    axios.get('../static/Goods.json').
      then(this.getGoodsDataSucc)
    },
    getGoodsDataSucc(res) {//获取成功后,将内容放入全局data内
      res = res.data//res就是getGoodsData获取的结果
      if (res) {
        this.cartsList = res.filter(item => this.cartsId.includes(item.id));
        //将商品信息以购物车里包含的id渲染的购物车总列表
      }
    },
  },
  mounted(){
    this.getCartsData()//在页面加载时,获取购物车id,即调用这个方法
    this.getGoodsData()
    // console.log(this.$UerCart)
  },    

}
</script>

<style scoped>
#all{
  width: 100%;
  height: 100%;
}
.titleWrapper{
  text-align: center;
  top:2px;
}
.clearCart{
  position: absolute;
  right: 0;
  top: 0px;
  border: none;
  color: red;
}
.tabBar {
  position: fixed;
  left: 0;
  bottom: 2.7rem;
  width: 100%;
  height: 2.5rem;
  background-color: #fff;

  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 0.01rem solid #e0e0e0;
}

.tabBarLeft {
  display: flex;
  align-items: center;
  margin-left: 0.5rem;
}

.tabBarLeft .selectAll {
  margin-left: 1rem;
  font-size: 1rem;
}

.totalPrice {
  color: #E9232C;
}

.tabBarRight .pay {
  width: 5rem;
  height: 2rem;
  background-color: #E9232C;
  border-radius: 1rem;
  margin-right: 0.5rem;

  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1rem;
  color: #fff;
}

</style>
